{% extends 'mathesar/app_styled_base.html' %}
{% load i18n static %}
{% translate "Finalizing Installation..." as creating_user_loader_text %}

{% block title %}
{% translate "Complete Installation" %}
{% endblock %}

{% block page_styles %}
<style type="text/css">
  body {
    padding: 4rem 2rem;
    background: var(--color-bg-base);
    color: var(--color-fg-base);
    overflow-y: auto;
  }

  .container {
    max-width: 65rem;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    gap: 2rem;
    grid-template-columns: 2fr 5fr;
  }

  .logo img {
    width: 13.25rem;
    display: block;
  }

  .heading {
    display: flex;
    flex-direction: column;
    gap: var(--lg1);
  }

  .heading h1 {
    font-weight: 500;
    font-size: var(--lg4);
    margin: 0;
  }

  .heading .instruction {
    display: flex;
    flex-direction: column;
    gap: var(--sm4);
  }

  hr {
    width: 100%;
    background-color: var(--color-border-section);
    height: 1px;
    border: none;
    margin: var(--sm4) 0;
  }

  .help {
    font-size: var(--sm1);
  }

  .help.error {
    color: var(--color-fg-danger);
  }

  .help.info {
    color: var(--color-fg-subtle-2);
  }

  .form-card {
    background-color: var(--card-background);
    padding: var(--lg4);
    border-radius: var(--border-radius-l);
    display: grid;
    gap: var(--lg1);
    box-shadow: 0 4px 6px -1px var(--color-shadow),
            0 2px 4px -2px var(--color-shadow),
            0 0 0 1px var(--color-shadow) inset;
  }

  .form-card .form-group-title {
    font-weight: 500;
    font-size: var(--lg2);
  }

  .form-card .title-help {
    margin-top: var(--sm4);
  }

  .form-card .inputs-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .form-card .password-inputs-container {
    display: grid;
    gap: var(--sm1);
    grid-template-columns: 1fr 1fr;
  }

  .form-card .label-component {
    font-weight: 500;
    color: var(--color-fg-label);
  }

  .form-card .input-element {
    margin-top: var(--sm5);
  }

  .form-card .footer {
    margin-top: 1rem;
    text-align: right;
  }

  a.help-link {
    color: var(--color-fg-subtle-1);
  }

  
  .language-selector-form {
    position: fixed;
    top: 2%;
    right: 2%;
  }

  .language-selector {
    display: block;
    background-color: var(--color-bg-input);
    border: 1px solid var(--color-border-input);
    border-radius: var(--border-radius-m);
    color: var(--color-fg-base);
    padding: var(--sm3);
    cursor: pointer;
  }


  @media (max-width: 54rem) {
    .container {
      grid-template-columns: none;
      grid-auto-rows: auto;
    }
  }
</style>
{% endblock %}

{% block content %}
<div class="container">
  <div class="heading">
    <div class="logo">
      <img
        src="{% static 'images/red-logo-with-text.svg' %}"
        alt="Mathesar Logo"
      />
    </div>
    <h1>{% translate "Finish Setting Up Mathesar" %}</h1>
    <div class="instruction">
      <div>{% translate "Welcome to Mathesar!" %}</div>
      <div>
        {% translate "Create an Admin user to start using Mathesar. You can also choose to share anonymous data to help us improve." %}
      </div>
    </div>
  </div>

  <form
    method="post"
    class="form-card"
    onsubmit="showLoadingStatus({{ creating_user_loader_text }});"
  >
    <div>
      <div class="form-group-title">{% translate "Create Admin User" %}</div>
      <div class="help info title-help">
        {% translate "Set up an Admin user account. This account will have full control over your Mathesar installation." %}
      </div>
    </div>

    {% csrf_token %}

    <div class="inputs-container">
      <div>
        <label for="id_username" class="label-component">
          {% translate "Username" %}
        </label>
        <input
          type="text"
          name="username"
          class="input-element{% if form.username.errors %} has-error{% endif %}"
          value="{% if form.username.value %}{{ form.username.value }}{% endif %}"
          autofocus
          autocapitalize="none"
          autocomplete="username"
          required
          id="id_username"
        />
      </div>
      {% if form.username.errors %}
      <div class="help error">
        {% for error in form.username.errors %}
        <span class="error">{{ error|escape }}</span>
        {% endfor %}
      </div>
      {% endif %}

      <div class="password-inputs-container">
        <div>
          <label for="id_password1" class="label-component">
            {% translate "Password" %}
          </label>

          <input
            type="password"
            name="password1"
            class="input-element{% if form.password1.errors %} has-error{% endif %}"
            value="{% if form.password1.value %}{{ form.password1.value }}{% endif %}"
            autofocus
            autocapitalize="none"
            autocomplete="new-password"
            required
            id="id_password1"
          />
        </div>
        <div>
          <label for="id_password2" class="label-component">
            {% translate "Confirm Password" %}
          </label>

          <div class="input">
            <input
              type="password"
              name="password2"
              class="input-element{% if form.password2.errors %} has-error{% endif %}"
              value="{% if form.password2.value %}{{ form.password2.value }}{% endif %}"
              autofocus
              autocapitalize="none"
              autocomplete="new-password"
              required
              id="id_password2"
            />
          </div>
        </div>
      </div>

      <div class="help info">
        {% translate "Your password must be at least 8 characters long." %}
        {% translate "We recommend a mix of letters, numbers, and symbols for added security." %}
      </div>

      {% if form.password1.errors %}
      <div class="help error">
        {% for error in form.password1.errors %}
        <span>{{ error|escape }}</span>
        {% endfor %}
      </div>
      {% endif %}

      {% if form.password2.errors %}
      <div class="help error">
        {% for error in form.password2.errors %}
        <span>{{ error|escape }}</span>
        {% endfor %}
      </div>
      {% endif %}
    </div>

    {% if form.non_field_errors %}
    <div class="message-box error-message">
      <div class="icon">&#9888;</div>
      <div>
        {% for error in form.non_field_errors %}
        <span>{{ error|escape }}</span>
        {% endfor %}
      </div>
    </div>
    {% endif %}

    <hr />

    <div>
      <div class="form-group-title">
        {% translate "Support Mathesar's Growth" %}
      </div>
    </div>

    <div class="inputs-container">
      <div class="labeled-input layout-inline-input-first">
        <div class="label-content">
          <input
            class="checkbox labeled-input-slot input"
            type="checkbox"
            id="one_time_confirmation"
            name="one_time_installation_confirmation"
            checked
          />
          <label class="labeled-input-label label-component" for="one_time_confirmation">
            {% translate "Send a one-time confirmation to let us know you've installed Mathesar" %}
          </label>
          <div class="help">
            {% translate "Let our open-source team know we have real users out there." %}
            {% translate "No personal data is shared, just an acknowledgment of your installation." %}
          </div>
        </div>
      </div>
      <div class="labeled-input layout-inline-input-first">
        <div class="label-content">
          <input
            class="checkbox labeled-input-slot input"
            type="checkbox"
            id="usage_stats"
            name="usage_stats"
            checked
          />
          <label class="labeled-input-label label-component" for="usage_stats">
            {% translate "Enable anonymous usage data collection" %}
          </label>
          <div class="help">
            {% translate "Share anonymous usage data periodically to help us improve features." %}
            {% translate "No personal data is collected, and you can change this setting anytime." %}
            <!-- TODO_BETA: Add correct link to analytics information docs-page/website -->
            <a
              class="help-link"
              href="https://docs.mathesar.org/user-guide/usage-data-collection/"
              target="_blank"
            >
              {% translate "See what's shared." %}
            </a>
            <div>
              <a
                class="help-link"
                href="https://mathesar.org/privacy"
                target="_blank"
              >
                {% translate "See our privacy policy." %}
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="footer">
      <button class="btn btn-primary submit-button" type="submit">
        {% translate "Complete Installation" %}
      </button>
    </div>
  </form>
  <form class="language-selector-form" action="{% url 'set_language' %}" method="post">{% csrf_token %}
    <input name="next" type="hidden" value="{{ redirect_to }}">
    <select name="language" onchange="form.submit()" class="language-selector align-center" aria-label="Display Language">
        {% get_current_language as LANGUAGE_CODE %}
        {% get_available_languages as LANGUAGES %}
        {% get_language_info_list for LANGUAGES as languages %}
        {% for language in languages %}
            <option value="{{ language.code }}"{% if language.code == LANGUAGE_CODE %} selected{% endif %}>
                {{ language.name_local }} ({{ language.code }})
            </option>
        {% endfor %}
    </select>
  </form>
</div>
{% endblock %}

{% block page_scripts %}
<script>
  function showLoadingStatus(newText) {
    const loginButton = document.querySelector('form button[type="submit"]');
    loginButton.disabled = true;
    loginButton.innerText = newText ?? "Loading...";
  }
</script>
{% endblock %}
